<template>
	<view>
		<top-menu :show-back="showBack" :title="title" :menu="[]"></top-menu>
		<detail ref="detailRef" :id="orderId" v-if="type == 'edit'" @load="isSett"></detail>
		<order-detail ref="orderRef"  :order-id="orderId" @size="getSize"></order-detail>
		<canvasView class="canvas-view"  ref="canvas" @renderOver="renderOver" :order="orderDetails" :goods="detailList" />
		<view class="button" v-if="isSettlement == 0">
			<view class="add" :class=" " @tap.stop="addGood">
				添加商品
			</view>
			<view class="print" @tap.stop="print">打印</view>
			<view class="camera" :class="{'hasSign': orderInfo.sign!=''&& orderInfo.sign!=null }" @tap.stop="showActionSheets">
				{{orderInfo.sign!='' && orderInfo.sign!=null ? "已签名" :"签名"}}
			</view>
		</view>
		<u-popup overlayStyle="z-index:90" :closeable="true" :closeOnClickOverlay="closed" :show="showDiaolg" z-index="99" :round="10" mode="center" @close="()=>showDiaolg = false" :mask-close-able="false">
			<view class="title">添加商品</view>
			<view style="width: 600rpx;height: auto">
				<u-cell title="商品" :value="form.shopName" @tap="showPickers()">
					<u-icon slot="right-icon" name="arrow-right" />
				</u-cell>
				<u-cell title="规格" :value="form.shopSpec" @tap="showPickers('spec')">
					<u-icon slot="right-icon" name="arrow-right" />
				</u-cell>
				<u-cell title="单价">
					<u-number-box :min="0" :step="0.1" :disabled="form.shopName ==null" slot="value" :value="form.shopPrice" @change="changePrice" />
				</u-cell>
				<u-cell title="重量">
					<u-input cursor="20" inputAlign="right" type="number" :disabled="form.shopName ==null" slot="value" :value="form.shopNumber" @change="changeNumber" />
				</u-cell>
				<u-cell title="金额">
					<u-input cursor="20" inputAlign="right" type="number" :disabled="true" slot="value" :value="shopAmount" />
				</u-cell>
			</view>
			<view class="bottom">
				<view class="cancel" @tap.stop="handleCancel">取消</view>
				<view class="success" @tap.stop="handleSuccess">确认</view>
			</view>
		</u-popup>
		<u-picker :closeOnClickOverlay="closed" :show="showPicker" :showToolbar="true" mode="selector" :columns="columns" :keyName="keyName" @confirm="onPickerConfirm" @close="()=> showPicker = false" @cancel="()=> showPicker = false" />

		<u-action-sheet @select="selectAction" @close="()=>showActionSheet= false" :actions="actionList" :closeOnClickOverlay="true" :closeOnClickAction="true" title="选择签名方式" :show="showActionSheet"></u-action-sheet>
		<signature :show-sign="showSign" @save="save"></signature>
	</view>
</template>

<script>
	const app = getApp()
	import {
	  spec
	} from '@/utils/utils';
	import {
	  getGoods,
	  addGoods,
	  editOrder,
	  getOneOrder,
	} from '@/api/index.js'
	import canvasView from '../components/canvasView.vue';
	import detail from '../components/detail.vue';
	import Signature from '@/components/Signature/Signature.vue';
	import OrderDetail from '../components/OrderDetail.vue';
	import store from '../../../store';
	export default {
	  data() {
	    return {
	      title: '',
	      type: '',
	      orderId: null,
	      orderInfo: {
	        sign: ''
	      },
	      showBack: true,
	      form: {
	        shopId: null,
	        shopName: null,
	        shopSpec: null,
	        shopNumber: "",
	        shopPrice: "",
	        shopAmount: ''
	      },
	      closed: true,
	      goods: null,
	      showDiaolg: false,
	      showPicker: false,
	      columns: [],
	      keyName: '',
	      flag: "",
	      fresh: false,
	      showActionSheet: false,
	      actionList: [{
	          index: 1,
	          name: '拍照/从相册选取'
	        },
	        {
	          index: 2,
	          name: '直接签名'
	        }
	      ],
	      showSign: false,
	      size: 0,
	      isSettlement: 1,
	      orderDetails: null,
	      detailList: null
	    }
	  },
	  components: {
	    OrderDetail,
	    Signature,
	    detail,
	    canvasView
	  },
	  computed: {
	    shopAmount() {
	      console.log("shopAmount" + Number(this.form.shopPrice) * Number(this.form.shopNumber));
	      return this.form.shopNumber == '' ? 0 : (Number(this.form.shopPrice) * Number(this.form.shopNumber))
	        .toFixed(2)
	    },
	  },
	  onLoad({
	    orderId,
	    type
	  }) {
	    this.orderId = Number(orderId)
	    this.type = type
	    this.title = type == 'add' ? '编辑订单' : '订单详情'
	    this.getOrderInfo()
	  },
	  created() {
	    this.getGoods()
	  },
	  methods: {
	    async getOrderInfo() {
	      const res = await getOneOrder({
	        id: this.orderId
	      })
	      this.orderInfo = res.data
	    },
	    async getGoods() {
	      const res = await getGoods()
	      this.goods = res.rows
	    },
	    addGood() {

	      if (this.orderInfo.sign != '' && this.orderInfo.sign != null) {
	        uni.showToast({
	          icon: 'none',
	          title: '签名已存在',
	        })
	        return false
	      }
	      this.showDiaolg = !this.showDiaolg
	    },
	    showPickers(flag = 'goods') {
	      this.showPicker = !this.showPicker
	      this.flag = flag
	      console.log(this.flag)
	      if (flag == 'goods') {
	        this.columns = [this.goods]
	        this.keyName = "shopName"
	      } else {
	        this.columns = [spec]
	        this.keyName = "value"
	      }
	    },
	    onPickerConfirm(e) {
	      this.form.orderId = this.orderId
	      this.$nextTick(() => {
	        if (this.flag == 'goods') {
	          this.$set(this.form, 'shopId', e.value[0].id)
	          this.$set(this.form, 'shopName', e.value[0].shopName)
	          this.$set(this.form, 'shopPrice', e.value[0].price)
	        } else {
	          this.$set(this.form, "shopSpec", e.value[0].value)
	        }
	        this.flag = ""
	        this.showPicker = !this.showPicker
	      })
	    },
	    async handleSuccess() {
	      this.showDiaolg = false
	      this.form.shopAmount = this.shopAmount
	      if (this.form.shopAmount == "" || this.form.shopAmount == 0) {
	        this.$modal.msgError("总价有误")
	        return false
	      }
	      const res = await addGoods(this.form)
	      if (res.code == 200) {
	        this.$modal.msgSuccess(res.msg)
	        this.fresh = true
	        this.$store.commit("detail/SET_REFRESH", true)
	      }

	    },
	    handleCancel() {
	      this.showPicker = false
	      this.resetForm()
	    },
	    changeNumber(e) {
	      this.$set(this.form, 'shopNumber', e)
	    },
	    changePrice(e) {
	      this.$set(this.form, 'shopPrice', e.value)
	    },
	    resetForm() {
	      this.$set(this.form, 'shopId', "")
	      this.$set(this.form, 'shopName', "")
	      this.$set(this.form, 'shopPrice', "")
	      this.$set(this.form, 'shopNumber', "")
	      this.$set(this.form, "shopSpec", "")
	    },
	    showActionSheets() {
	      if (this.orderInfo.sign != '' && this.orderInfo.sign != null) {
	        return false
	      }
	      if (this.size == 0) {
	        this.$modal.msgError('商品为空')
	        return false
	      }
	      this.showActionSheet = true
	    },
	    selectAction({
	      index
	    }) {
	      switch (index) {
	      case 1:
	        uni.chooseImage({
	          count: 1,
	          success: (res) => {
	            console.log(res)
	          }
	        })
	        break;
	      case 2:
	        if (this.goods.length == 0) {
	          this.$modal.msg('还未添加商品')
	          return false
	        }
	        this.showSign = true
	        this.showBack = false
	        break;
	      }
	    },
	    async save(url) {
	      const _ = this
	      const flag = await this.$modal.confirm('确认上传')
	      console.log(flag)
	      if (!flag) {
	        _.showBack = true
	        _.showSign = false
	        return false
	      }
	      const res = await editOrder({
	        id: _.orderId,
	        sign: url
	      })
	      if (res.code == 200) {
	        uni.showToast({
	          icon: 'success',
	          title: '上传成功'
	        })
	        store
	        _.$set(this.orderInfo, 'sign', res.data.sign)
	      }
	      _.showBack = true
	      _.showSign = false
	    },
	    getSize(size) {
	      this.size = size
	    },
	    isSett(flag) {
	      console.log("isSettlement===>", flag)
	      this.isSettlement = Number(flag)
	    },
	    print() {
	      this.orderDetails = this.$refs.detailRef.order
	      this.detailList = this.$refs.orderRef.detailList
	      setTimeout(()=>{
	      	this.$refs.canvas.$refs.renderRef.h2cRenderDom();
	      },3000)

	      this.$modal.msg('打印功能暂未实现')
	    },
		renderOver(e){
			console.log(e)
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.button {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: space-evenly;
	  height: 80rpx;
	  line-height: 80rpx;
	  position: fixed;
	  bottom: 2rpx;
	  text-align: center;
		background-color: #fff;
	  color: $uni-bg-color;

	  .add {
	    flex: 1;
	    background: seagreen;
	    border-top-left-radius: 15rpx;
	    border-bottom-left-radius: 15rpx;
	  }

	  .print {
	    flex: 1;
	    background: lawngreen;
	  }

	  .camera {
	    flex: 1;
	    background: lightcoral;
	    border-top-right-radius: 15rpx;
	    border-bottom-right-radius: 15rpx;
	  }

	  .hasSign {
	    background: $uni-bg-color-mask;
	  }
	}
	.canvas-view{
		position: fixed;
		top: 100%;
	}
</style>